<template>
    <div class="ListItem">
        <a-row class="ListItem-row" v-for="item in labelList" :key="item.value">
            <a-col :span="6">{{ item.label }}</a-col>
            <a-col :span="18">
                <div class="ListItem-row-right">{{ itemInfo[item.value] }}
                </div>
            </a-col>
        </a-row>
        <div class="ListItem-footer">
            <a-button type="primary" size="default" @click="handClick" :ghost="true">查看详情</a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ListItem',
    props: {
        itemInfo: {
            type: Object,
        }
    },
    data() {
        return {
            labelList: [
                {
                    label: '流程名称',
                    value: 'titleName',
                },
                {
                    label: '发起人',
                    value: 'userName',
                },
                {
                    label: '发起部门',
                    value: 'originatorDeptName',
                },
                {
                    label: '工单状态',
                    value: 'status',
                },
                {
                    label: '办理时间',
                    value: 'updateTime',
                },
                {
                    label: '发起时间',
                    value: 'createTime',
                },
            ],
        }
    },
    methods: {
        handClick() {
            window.location.href = `https://aflow.dingtalk.com/dingtalk/mobile/homepage.htm?corpid=dingbade83a0adc15760ffe93478753d9884&dd_share=false&showmenu=false&dd_progress=false&back=native&procInstId=${this.itemInfo.flowId}&taskId=&swfrom=isv&dinghash=approval&dtaction=os&dd_from=#approval`
        }
    }
}
</script>

<style lang="less" scoped>
.ListItem {
    padding: 8px;
    background: #F7FAFC;

    &-row {
        border-bottom: 1px solid #66666650;
        padding: 10px 0px;

        &-right {
            text-align: right;
            word-wrap: break-word;
            /* 现代浏览器推荐使用的属性，与 word-wrap 效果类似 */
            overflow-wrap: break-word;
            /* 控制单词内是否允许换行 */
            word-break: normal;
        }
    }

    &-footer {
        width: 100%;
        padding: 16px 0px 8px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>